<template>
	<!-- 弹窗组件 -->
	<!-- 判断是否显示 -->
	<div class="popUp" v-if="props.isShowInf.isShow">
		<!-- 遮罩层 -->
		<div class="Mask" @click="test"></div>
		<!-- 二级遮罩层 -->
		<div class="Mask2" v-show="splitLis.popUpShow"></div>
		<!-- 拆分弹窗 -->
		<div class="split" v-show="splitLis.popUpShow">
			<div class="ti">
				<div>
					拆分数量
				</div>
				<div @click="closeAdd">X</div>
			</div>
			<div class="y">
				<div>姓名:{{splitLis.nowData.fPreservePeople || '未知'}}</div>
				<div>剩余:{{splitLis.nowData.fNumber || 0}}</div>
			</div>
			<div class="f">
				<div class="top">
					<div>姓名</div>
					<div>数量</div>
					<div>起始年月</div>
					<div>操作</div>
				</div>
				<div class="containers" style="max-height: 10.208333rem;">
					<div class="dataList" v-for="i,j in splitLis.List">
						<div>{{i.fPreservePeople}}</div>
						<div>{{i.fNumber}}</div>
						<div>{{i.fStartTime }}</div>
						<div class="del">
							<div class="delicon" @click="delSplitItem(j,i)">
								删除
							</div>
						</div>
					</div>
				</div>
				<div class="bot2">
					<el-select v-model="splitLis.inputInf.fPreservePeople" filterable placeholder="Select">
						<el-option v-for="item in splitLis.crList" :key="item.fUserName" :label="item.fUserName"
							:value="item.fUserName" />
					</el-select>
					<input type="number" min="0" v-model="splitLis.inputInf.fNumber" />
					<input type="date" v-model="splitLis.inputInf.date" />
					<div class="del">
						<div class="delicon" @click="done">
							确认
						</div>
					</div>
				</div>
				<div class="foot">
					<button type="button" @click="submitSplitData">提交</button>
				</div>
			</div>

		</div>
		<!-- 新增或编辑弹窗 -->
		<div v-if="props.isShowInf.type==1" class="wind" style="width: 60vw;overflow: auto;">
			<!-- 头部标题 -->
			<div class="header">
				<div class="ti">
					{{props.isShowInf.isAdd?'新增':'编辑'}}{{props.isShowInf.pageInf.name+'单'}}
				</div>
				<!-- 关闭弹窗按钮 -->
				<div class="cel" @click="clearAll">
					X
				</div>
			</div>
			<!-- 弹窗输入主体 -->
			<div class="cont">
				<div class="cont-top">
					<!-- li:指具有相同性质的项目 -->
					<div class="li">
						<div class="ti">变更单号:</div>
						<div class="val">
							{{inputData.data[pageNum-1].changeTransport.fId}}
						</div>
					</div>
					<div class="li">
						<div class="ti">项目编号:</div>
						<div class="val">
							{{inputData.data[pageNum-1].changeTransport.fWorkNum}}
						</div>
					</div>
					<div class="li">
						<div class="ti">小区名称:</div>
						<div class="val">
							{{inputData.data[pageNum-1].changeTransport.fSitesId}}
						</div>
					</div>
					<div class="li">
						<div class="ti">片区名称:</div>
						<div class="val">
							{{inputData.data[pageNum-1].changeTransport.fAreaName}}
						</div>
					</div>
					<div class="li">
						<div class="ti">项目地址:</div>
						<div class="val" style="width: 90%;">
							{{inputData.data[pageNum-1].changeTransport.fProjectAddress}}
						</div>
					</div>
					<div class="li">
						<div class="ti">维护数量:</div>
						<div class="val">
							{{inputData.data[pageNum-1].changeTransport.fQuantityYj}}
						</div>
					</div>
					<div class="li">
						<div class="ti">项目名称:</div>
						<div class="val">
							{{inputData.data[pageNum-1].changeTransport.fName}}
						</div>
					</div>
					<div class="li">
						<div class="ti">项目编号:</div>
						<div class="val">
							{{inputData.data[pageNum-1].changeTransport.fWorkNum}}
						</div>
					</div>
					<div class="li">
						<div class="ti">表类型:</div>
						<div class="val">
							{{inputData.data[pageNum-1].changeTransport.fSetupMode}}
						</div>
					</div>
					<div class="li">
						<div class="ti">原维护人员:</div>
						<div class="val">
							{{inputData.data[pageNum-1].changeTransport.fOriginalPeople}}
						</div>
					</div>
					<div class="li">
						<div class="ti">原统计年月:</div>
						<div class="val">
							{{inputData.data[pageNum-1].changeTransport.fOriginalTime}}
						</div>
					</div>
					<div class="li">
						<div class="ti">提交人:</div>
						<div class="val">
							{{inputData.data[pageNum-1].changeTransport.fTransportUser}}
						</div>
					</div>
					<div class="li">
						<div class="ti">审核人:</div>
						<div class="val">
							{{inputData.data[pageNum-1].changeTransport.fAuditUserId}}
						</div>
					</div>
					<div class="li">
						<div class="ti">审核状态:</div>
						<div class="val">
							{{['未投运','已投运','已关闭'][inputData.data[pageNum-1].changeTransport.fTransportState/10]}}
						</div>
					</div>
					<div class="li">
						<div class="ti">审核时间:</div>
						<div class="val">
							{{inputData.data[pageNum-1].changeTransport.fAuditorTime}}
						</div>
					</div>
					<div class="li">
						<div class="ti">维护人:</div>
						<div class="val">
							{{inputData.data[pageNum-1].changeTransport.fPreservePeople}}
						</div>
					</div>
					<div class="li">
						<div class="ti">备注:</div>
						<div class="val">
							{{inputData.data[pageNum-1].changeTransport.fRemark}}
						</div>
					</div>
				</div>
				<div class="cont-bot" @click="test">
					<el-table :data="inputData.data[pageNum-1].detailsList" height="170" style="width: 100%" border>
						<el-table-column :fixed="(index==0)?true:false" :label="item.ti"
							v-for="(item,index) in changeTableHeaderList"
							:prop="item.value" />
					</el-table>
				</div>
			</div>
			<!-- 弹窗底部 -->
			<div class="formFoot">
				<div class="left">
					<!-- 占位 -->
				</div>
				<div class="rit">
					<button type="button" @click="(inputData.data[pageNum-1].changeTransport.fTransportState!=10)?(sh()):''" v-if="!props.isShowInf.isAdd">{{(inputData.data[pageNum-1].changeTransport.fTransportState==10)?'已审核':'审核'}}</button>
					<button type="button" @click="clearAll">取消</button>
					<button type="button" @click="tijiao">提交</button>
				</div>
			</div>
		</div>
		<!-- 删除提醒弹窗 -->
		<div class="msg" v-if="props.isShowInf.type==2">
			<div class="header">
				<div></div>
				<div class="cel" @click="clearAll">X</div>
			</div>
			<div class="cont">
				是否删除此条{{props.isShowInf.pageInf.fPreservePeople}}单信息？
			</div>
			<div class="function">
				<button type="button" @click="clearAll">取消</button>
				<button type="button" @click="delet">确认</button>
			</div>
		</div>
		<!-- 添加第一级弹窗 -->
		<div class="addFormData" v-if="props.isShowInf.type==0">
			<!-- 头部标题 -->
			<div class="header">
				<div class="ti">
					{{props.isShowInf.pageInf.popup}}
				</div>
				<!-- 关闭窗口按钮 -->
				<div class="cel" @click="clearAll">X</div>
			</div>
			<!-- 数据查询条件 -->
			<div class="head">
				<div class="li">
					<div class="ti">项目号:</div>
					<input type="text" v-model="selectInput.fWorknum">
				</div>
				<div class="li">
					<div class="ti">片区:</div>
					<el-select v-model="selectInput.fAreaName" filterable placeholder="Select">
						<el-option v-for="item in formData.areaList" :key="item.fId" :label="item.fArea"
							:value="item.fArea" />
					</el-select>
				</div>
				<div class="li">
					<div class="ti">人员:</div>
					<el-select v-model="selectInput.fPreservePeople" filterable placeholder="Select">
						<el-option v-for="item in formData.personnelList" :key="item.fUserId" :label="item.fUserName"
							:value="item.fUserName" />
					</el-select>
				</div>
				<div class="li">
					<div class="ti">年月:</div>
					<input type="date" v-model="selectInput.fStartTime" />
				</div>
				<div class="li">
					<button type="button" @click="select">查询</button>
					<button type="button" @click="clear">重置</button>
				</div>
			</div>
			<!-- 查询显示表格 -->
			<div class="table">
				<div class="ti">
					<div class="text">原明细</div>
					<div></div>
					<div></div>
				</div>
				<el-table :data="table.data" height="170" style="width: 100%" border>
					<el-table-column :fixed="(index==0)?true:false" :label="item.ti"
						:width="(item.ti.length>4)?'140':'113'" v-for="(item,index) in tableHeaderList"
						:prop="item.value" />
					<el-table-column fixed="right" label="操作" width='140'>
						<template #default="scope">
							<button type="button" :class="(splitLis.OriginalData.fNumber=='')?(''):('details')"
								@click="split(scope.$index, scope.row)">拆分</button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="table" style="padding-bottom: 1.041666rem;">
				<div class="ti">
					<div class="text">拆分后</div>
					<div></div>
					<div></div>
				</div>
				<el-table :data="splitLis.splitData" height="170" style="width: 100%;" border>
					<el-table-column :fixed="(index==0)?true:false" :label="item.ti"
						v-for="(item,index) in tableHeaderList" :prop="item.value" />
				</el-table>
			</div>
			<!-- 弹窗底部 -->

			<!-- 弹窗末尾 -->
			<div class="footer">
				<button type="button" @click="chanPopupType">确认</button>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		defineExpose,
		defineProps,
		defineEmits,
		watch,
		toRefs
	} from 'vue'
	import {
		ElMessage
	} from 'element-plus'
	import ajax from '../../../public/JavaScript/api/ajax.js'
	import paging from '../Paging'
	import modata from '../../../public/JavaScript/monidata.js'
	/* 表头列表 */
	let tableHeaderList = reactive([])
	let changeTableHeaderList=reactive([])
	/* 表格数据 */
	let table = reactive({
		data: [],
		splitData: [],
		yData:[]
	})

	/* 模拟用 */
	let splitLis = reactive({
		OriginalData: {
			index: '',
			fNumber: '',
			fPreservePeople: ''
		}, //原数据
		nowData: {
			index: '',
			fNumber: '',
			fPreservePeople: ''
		}, //当前正在拆分数据
		rList: [], //人员列表
		List: [], //拆分列表
		crList: [], //人员列表副本
		inputInf: { //拆分输入内容
			fPreservePeople: '', //维护人姓名
			date: '', //维护时间
			fNumber: 0 //维护数量
		},
		popUpShow: false, //二级弹窗是否显示
		splitData: [],
	})
	/* 重置拆分输入框 */
	function clearSplitInput() {
		splitLis.inputInf = {
			fPreservePeople: '',
			date: '',
			fNumber: 0
		}
	}
	/* 重置人员列表副本 */
	function poperList() {
		splitLis.crList = []
		for (let i in modata.rList) {
			splitLis.crList.push(modata.rList[i])
			// console.log(modata.rList[i])
		}
	}
	/* 本地保存数据 */
	let localData = reactive({
		List: []
	})
	/* 点击拆分按钮 */
	//rows：返回索引
	//data：返回点击行数据
	function split(rows, data) {
		console.log('输出拆分行：', rows, data)
		table.yData=table.data
		table.data = table.data.filter(function(item, index) {
			return index == rows
		})
		// 判断当前是否已有正在拆分的数据
		if (splitLis.OriginalData.fNumber == '') {
			// 给正在被拆分变量赋值
			splitLis.OriginalData ={}
			let ssdata=JSON.stringify(data)
			splitLis.OriginalData=JSON.parse(ssdata)
			let ssdata2=JSON.stringify(data)
			splitLis.nowData = JSON.parse(ssdata2)
			/* 删除被拆分者本人 */

			// for(let i in splitLis.crList){
			// 	// console.log(splitLis.crList[i].value,splitLis.inputInf.fPreservePeople)
			// 	if(splitLis.crList[i].value==data.fPreservePeople){
			// 		splitLis.crList.splice(i,1)
			// 	}
			// }

			// 弹窗显示
			splitLis.popUpShow = true
		}
		// console.log(splitLis.OriginalData)
		// console.log(rows,data)
	}
	/* 中断拆分操作后被运行 */
	function closeAdd() {
		splitLis.OriginalData = {
			index: '',
			fNumber: '',
			fPreservePeople: ''
		}
		splitLis.nowData = {
			index: '',
			fNumber: '',
			fPreservePeople: ''
		}
		splitLis.popUpShow = false
		clearSplitInput()
		splitLis.List = []
		table.data = table.yData;
	}
	/* 拆分完成按钮 */
	function done() {
		// console.log(splitLis.inputInf.fPreservePeople)
		let sum = 0; //当前已拆分数
		/* 非空判断 */
		if (splitLis.inputInf.fPreservePeople == '') {
			ElMessage.error('姓名不能为空！')
		} else if (splitLis.inputInf.fNumber == '') {
			ElMessage.error('数量不能为空！')
		} else if (splitLis.inputInf.date == '') {
			ElMessage.error('日期不能为空！')
		} else {
			/* 计算总数量 */
			for (let i in splitLis.List) {
				sum = sum + splitLis.List[i].fNumber
			}
			sum = sum + splitLis.inputInf.fNumber
			console.log(splitLis.OriginalData.fNumber,sum,splitLis.nowData.fNumber)
			if (sum > splitLis.OriginalData.fNumber) {
				ElMessage.error('数量不足，当前溢出【' + (sum - splitLis.OriginalData.fNumber) + '】！')
			} else {
				/* 过滤已经被选择人员 */
				// for (let i in splitLis.crList) {
				// 	// console.log(splitLis.crList[i].value,splitLis.inputInf.fPreservePeople)
				// 	if (splitLis.crList[i].fUserName == splitLis.inputInf.fPreservePeople) {
				// 		splitLis.crList.splice(i, 1)
				// 	}
				// }
				/* 改变当前剩余总数 */
				splitLis.nowData.fNumber = splitLis.nowData.fNumber - splitLis.inputInf.fNumber
				splitLis.List.push({
					fPreservePeople: splitLis.inputInf.fPreservePeople,
					fNumber: splitLis.inputInf.fNumber,
					fStartTime: splitLis.inputInf.date,
					fAreaName: splitLis.nowData.fAreaName,
					fId: splitLis.nowData.fId,
					fProjectName: splitLis.nowData.fProjectName,
					fSetupMode: splitLis.nowData.fSetupMode,
					fWorknum: splitLis.nowData.fWorknum

				})
				/* 清空输入 */
				clearSplitInput()
			}
		}
	}

	function delSplitItem(index, data) {
		splitLis.nowData.fNumber = splitLis.nowData.fNumber + data.fNumber
		splitLis.List.splice(index, 1)
	}

	function submitSplitData() {
		if(splitLis.List.length==0){
			ElMessage.error('拆分项为空！')
		}else{
			splitLis.splitData = splitLis.List
			console.log(splitLis.splitData)
			// splitLis.splitData.push(splitLis.nowData)
			splitLis.nowData = {
				index: '',
				fNumber: '',
				fPreservePeople: ''
			}
			splitLis.popUpShow = false
			clearSplitInput()
			splitLis.List = []
		}
		// localData.data.push({
		// 	yData:splitLis.nowData,
		// 	splitData:splitLis.List
		// })
	}

	onMounted(() => {
		/* 给表头赋值 */
		// console.log(props.isShowInf.pageInf.innerSurface)
		tableHeaderList = props.isShowInf.pageInf.innerSurface
		changeTableHeaderList=props.isShowInf.pageInf.changeTableHeaderList
		/* 监听键盘左右健翻页事件 */
		// window.addEventListener('keyup', e => {
		// 	/* 判断弹窗是否显示 */
		// 	if (props.isShowInf.isShow) {
		// 		/* 判断是否按下键盘左键 */
		// 		if (e.keyCode == 37) {
		// 			chanPage(1)
		// 		} else if (e.keyCode == 39) {
		// 			chanPage(2)
		// 		}
		// 	}
		// })
		poperList() //给人员列表副本赋值
		ajax.post2('/qj-area/selectArea', {}, res => {
			formData.areaList = res.data
			console.log(res.data)
		})
		ajax.post2('/qj-user/selectUser', {}, res => {
			formData.personnelList = JSON.parse(JSON.stringify(res.data))
			splitLis.crList=JSON.parse(JSON.stringify(res.data))
			splitLis.rList=JSON.parse(JSON.stringify(res.data))
			console.log(res.data)
		})

	})


	let props = defineProps({
		/* 接收弹窗类型，是否显示，新增或编辑 */
		isShowInf: {
			default: false
		},
		/* 关闭窗口事件 */
		close: {
			type: Function
		},
		api: {}
	})
	let inputData=reactive({
		data:[]
	})
	watch(()=>{props.isShowInf.pageInf.data},()=>{
		if(!props.isShowInf.isAdd){
			console.log(props.isShowInf.pageInf.data)
			console.log(inputData.data)
			let arr23=[]
			arr23.push(props.isShowInf.pageInf.data.row)
			inputData.data=arr23
		}
	},{deep:true})
	function delet(){
		console.log(props.isShowInf.pageInf.data.row.changeTransport.fTransportState)
		if(props.isShowInf.pageInf.data.row.changeTransport.fTransportState!=10){
			ajax.post('/qj-c-transport/delete/'+(props.isShowInf.pageInf.data.row.changeTransport.fId),{},res=>{
				if(res.data==0){
					ElMessage.error('删除失败！')
				}else{
					ElMessage.success('删除成功！')
					props.close()
					emit('newData')
					table.data=[]
				}
			})
		}else{
			ElMessage.error('已投运不能删除！')
		}
	}
	/* 清除新增变更单所有数据 */
	function clearAll(){
		props.close()
		table.data=[]
		splitLis.OriginalData={
			index: '',
			fNumber: '',
			fPreservePeople: ''
		}
		splitLis.nowData={
			index: '',
			fNumber: '',
			fPreservePeople: ''
		}
		splitLis.rList=[]
		splitLis.List=[]
		splitLis.inputInf={ //拆分输入内容
			fPreservePeople: '', //维护人姓名
			date: '', //维护时间
			fNumber: 0 //维护数量
		}
		splitLis.splitData=[]
		for(let i in selectInput){
			selectInput[i]=''
		}
	}
	/* 改变弹窗类型 */
	let emit = defineEmits(['chan','newData'])

	function chanPopupType() {
		console.log(splitLis.splitData)
		let arr=[]
		for(let i in splitLis.splitData){
			arr.push(splitLis.splitData[i])
		}
		if(arr.length==0){
			ElMessage.error('拆分项不能为空！')
		}else{
			let obj={
				...toRefs(splitLis.OriginalData)

			}
			let sum =0;
			for(let i=0;i<arr.length;i++){
				sum=sum+arr[i].fNumber
			}
			let obj2=JSON.parse(JSON.stringify(splitLis.OriginalData))
			obj2.fNumber=sum*(-1)
			arr.push(obj2)
			console.log('631:',arr)
			ajax.post('/qj-c-transport/insert',{
				body:arr
			},res=>{
				console.log(res.data)
				inputData.data=[]
				inputData.data.push(res.data)
				/* 弹窗页数初始化 */
				pageNum.value = 1
				/* 向外抛改变弹窗类型对象 */
				emit('chan', null, null, 1, true)
			})
		}

	}
	function test(){
		console.log(inputData.data[pageNum.value-1].detailsList)
	}
	let selectInput = reactive({
		"page": '',
		"pageSize": '',
		"fWorknum": "",
		"fAreaName": "",
		"fPreservePeople": "",
		"fStartTime": ''
	})

	function clear() {
		for (let i in selectInput) {
			selectInput[i] = ""
		}
	}

	function pageInf(pagesize, page) {
		selectInput.pageSize = pagesize
		selectInput.page = page
		if (selectInput.fWorknum == '') {
			ElMessage.error('项目号不能为空！')
		} else {
			ajax.post(props.api.page, {
				body: selectInput
			}, res => {
				table.data = res.data.list
				console.log(res.data)
			})
		}

	}

	function select() {
			/* 给表格数据赋值 */
			// table=data.UnturnedOperationData.tableData
			ajax.post('/qj-details/selectConditionPage', {
				body: selectInput
			}, res => {
				table.data = res.data?.list || []
				console.log(res.data)
			})

	}
	let formData = reactive({
		area: '',
		areaList: [],
		personnel: '',
		personnelList: [],
		pqList:[]
	})


	/* 当前创建表单页数 */
	let pageNum = ref(1)
	/* 改变表单页数 */
	function chanPage(type) {
		/* 该方法被舍弃 */
	}
	/* 监听页数变化是否符合规范 */
	watch(pageNum, () => {
		if (pageNum.value > 0 && pageNum.value <= (inputData.data.length) || pageNum.value == '') {
			if (pageNum.value != '') {

			}
		} else {
			pageNum.value = 1 //不规范变为1
		}
	})
	/* 监听弹窗是否显示，初始化页数 */
	watch(() => {
		props.isShowInf.isShow
	}, () => {
		pageNum.value = 1
	}, {
		deep: true
	})
	/* 单击页数输入框选中页数 */
	function selectPageText(selectElement) {
		document.querySelectorAll('#pageNum')[0].select()
	}
	/* 失去焦点时检查页数是否为空 */
	function checkPageNum() {
		if (pageNum.value == '') { //为空页数变1
			pageNum.value = 1
		}
	}
	function tijiao(){
		/* 已废弃 */
		// ajax.post('/qj-c-transport/updateTransport',{
		// 	body:{
		// 		  "fAreaFId": inputData.data[pageNum.value-1].fAreaFId,
		// 		  "fAreaName": inputData.data[pageNum.value-1].fAreaName,
		// 		  "fChangeArea": inputData.data[pageNum.value-1].fChangeArea,
		// 		  "fChangeNumber": inputData.data[pageNum.value-1].fChangeNumber,
		// 		  "fChangePeople": inputData.data[pageNum.value-1].fChangePeople,
		// 		  "fChangeStatTime": inputData.data[pageNum.value-1].fChangeStatTime,
		// 		  "fId": inputData.data[pageNum.value-1].fId
		// 	}
		// },res=>{
		// 	if(res.data==0){
		// 		ElMessage.error('修改失败！')
		// 	}else{
		// 		ElMessage.success('修改成功！')
		// 		chanPage(2)
		// 	}
		// })
		ElMessage.success('提交成功！')
		clearAll()
	}
	function sh(){
		ajax.post('/qj-c-transport/updateState',{
			body:inputData.data[pageNum.value-1]
		},res=>{
			if(res.data==0){
				ElMessage.error('审核失败！')
			}else{
				clearAll()
				ElMessage.success('审核成功！')
			}
		})
	}
</script>

<style lang="less" scoped="scoped">
	@import 'index.less';
</style>
